<template>
  <div class="articleInfoParticulars">
    <getBack></getBack>
    <getScroll></getScroll>

    <main-frame>
      <template #page>
        <div class="page">
          <div class="communityMain">
            <div class="infoItem">
              <div class="top">
                <!-- 左边头像信息 -->
                <div class="portrait">
                  <img v-if="articleInfo.user.avatar" :src="articleInfo.user.avatar" alt="" />
                  <img v-else src="@/assets/img/default/noPortrait.svg" />
                  <div class="describe">
                    <div class="name">{{ articleInfo.user.name }}</div>
                    <div class="info">
                      {{ articleInfo.user.account }}
                    </div>
                  </div>
                </div>
                <!-- 右边关注按钮 -->
                <el-button
                  round
                  :icon="isAttention && isAttention == 1 ? '' : 'Plus'"
                  :type="isAttention && isAttention == 1 ? 'info' : ''"
                  style="margin-bottom: 10px; margin-top: 4px"
                  @click="buttonConcerns(articleInfo.user.id, isAttention)"
                  >{{ isAttention == 0 ? "关注" : "已关注" }}</el-button
                >
              </div>
              <div class="content">
                <div class="title">
                  {{ articleInfo.title }}
                </div>
                <div class="abstract" v-html="articleInfo.body"></div>
              </div>
              <div class="bottom">
                <div class="bottomLeft">
                  <!-- <div class="topic" v-for="tagsItem in viewArticle.tags" :key="tagsItem.id">
                  <img src="./../../../../public/images/interflow_icon/topic_tag.svg" alt="" />
                  <i>{{ tagsItem.customTagName }}</i>
                </div> -->
                </div>
                <div class="circle">
                  <div class="leftBox">
                    <img :src="articleInfo.category.avatar" alt="" />
                    <div class="describe">
                      <h3>{{ articleInfo.category.name }}</h3>
                      <p>{{ articleInfo.category.account }}+人加入</p>
                    </div>
                  </div>
                  <!-- @click="toCircle(viewArticle.category.id)" -->
                  <div class="rightBox">进入圈子</div>
                </div>

                <div class="info">
                  <div class="view">
                    <i class="iconfont icon-wode"></i>
                    <div class="number">{{ articleInfo.view_counts }}</div>
                  </div>

                  <div
                    class="like"
                    :style="{ color: isSupport ? 'red' : '' }"
                    @click="reqOperateArticle('Support', articleInfo.id, articleInfo.user.id)"
                  >
                    <i class="iconfont icon-dianzan1"></i>
                    <div class="number">{{ articleInfo.support_counts }}</div>
                  </div>

                  <div
                    class="save"
                    :style="{ color: isSave ? '#bfbf11' : '' }"
                    @click="reqOperateArticle('Save', articleInfo.id, articleInfo.user.id)"
                  >
                    <i class="iconfont icon-xihuan1"></i>
                    <div class="number">{{ articleInfo.save_counts }}</div>
                  </div>
                </div>

                <div class="timeAndType">
                  <i>发布于: {{ formatDate(articleInfo.createTime, true) }}</i>
                  <i>内容为{{ articleInfo.type }} </i>
                </div>
              </div>
            </div>
            <div class="comment" ref="commentEdit">
              <h3>
                <span>全部评论</span>
                <i>{{ !articleInfo.comments ? 0 : articleInfo.comments.length }}</i>
              </h3>

              <!-- 发表评论 -->
              <div class="publishComment">
                <div class="portrait">
                  <!-- <img :src="require('../../../assets/unknownPortrait.svg')" alt="" /> -->
                  <img v-if="userInfo" :src="userInfo.avatar" alt="" />
                  <img v-else src="@/assets/img/default/noPortrait.svg" />
                </div>
                <!-- @keyup.enter.native="handleAddComment" -->
                <el-input
                  :disabled="userInfo == null"
                  v-model="userComment"
                  :placeholder="
                    userInfo == null ? '登录后才可以评论' : '请发表对文章的评论。注意文明聊用语！'
                  "
                ></el-input>
              </div>

              <!-- 评论内容 -->
              <template v-if="articleInfo.comments"
                ><div
                  class="commentBox"
                  v-for="item in articleInfo.comments.filter((i) => i.commentId === null)"
                  :key="item.id"
                >
                  <comment :comment="item" :all-comment="articleInfo.comments"></comment></div
              ></template>
            </div>
          </div>
        </div>
      </template>
      <template #rightBox>
        <div class="rightBox">
          <div class="personInfo">
            <div class="top">
              <img v-if="articleInfo.user.avatar" :src="articleInfo.user.avatar" alt="" />
              <img v-else src="@/assets/img/default/noPortrait.svg" />
              <h2 class="userName">{{ articleInfo.user.name }}</h2>
              <h3 class="userAccount">
                {{ articleInfo.user.account }}
              </h3>
            </div>
            <div class="bottom">
              <div>
                <span class="num">{{ articleInfo.user.attention_counts + 10 }}</span>
                <span class="text">关注</span>
              </div>
              <div>
                <span class="num">{{ articleInfo.user.fans_counts + 10 }}</span>
                <span class="text">粉丝</span>
              </div>
              <div>
                <span class="num">{{ articleInfo.user.support_counts + 10 }}</span>
                <span class="text">获赞</span>
              </div>
            </div>
          </div>

          <div class="information">
            <h3>
              帖子推荐
              <span @click="reqGETRandomArticle"
                ><span><i class="iconfont icon-shuaxin"></i></span> <span>换一批</span></span
              >
            </h3>
            <div class="informationInfo">
              <div
                class="informationItem"
                v-for="(articlesItems, index) in randomArticles"
                :key="articlesItems.id"
                @click="goArticleInfoPage(articlesItems)"
              >
                <span class="rankings">{{ index + 1 }}</span>
                <a :title="articlesItems.title"
                  ><span class="text">{{ articlesItems.title }}</span></a
                >
              </div>
            </div>
          </div>

          <div class="aboutUs">
            <img
              @click="routerJump('push', 'Home')"
              src="@/assets/img/logo/LogoIcon-Black4.png"
              alt=""
            />

            <div class="describe">
              <div class="name">欢迎关注动物保护社区</div>
              <div class="info">点击右边扫码下载APP</div>
            </div>
            <i class="iconfont icon-erweima"></i>
          </div>
        </div>
      </template>
    </main-frame>
  </div>
</template>

<script setup lang="ts">
import mainFrame from "@/components/main-frame/main-frame.vue"
import getScroll from "@/components/UI-cnps/getScroll/getScroll.vue"
import getBack from "@/components/UI-cnps/getBack/getBack.vue"
import comment from "./c-cnps/comment.vue"
import { localCache } from "@/utils/cacheData"
import { nextTick, onMounted, onUnmounted, ref } from "vue"
import { CACHE_USERINFO } from "@/global/constants"
import useRouterJump from "@/hooks/useRouterJump"
import useCommunityStore from "@/store/main/community/community"
import { storeToRefs } from "pinia"
import useUserStore from "@/store/user/user"
import { InnerConfirm, InnerNotify, messageReminder } from "@/utils/notificationHint"
import _ from "lodash"
import { formatDate } from "@/utils/format"

const userInfo = localCache.getCache(CACHE_USERINFO)
let articleInfo = ref()
articleInfo.value = localCache.getCache("articleInfo")

const { routerJump, noLoginInnerNotify } = useRouterJump()

const commentOpacity = ref(0)
const commentEdit = ref<HTMLElement>()

// 滚动事件的回调函数
function handScroll() {
  nextTick(() => {
    // 获取元素高度
    const elementHeight = commentEdit!.value!.clientHeight
    // 获取浏览器高度
    const windowHeight = document.documentElement.clientHeight
    // 距离顶部的距离
    const elementOffsetTop = commentEdit!.value!.offsetTop
    // console.log(offsetTop);6
    // 页面滚动距离
    const windowScrollTop = window.scrollY

    // windowScrollTop = elementOffsetTop - windowHeight (目标元素刚进入可视区域)
    // windowScrollTop = elementOffsetTop + elementHeight（目标元素刚离开可视区域）
    if (
      windowScrollTop <= elementOffsetTop + elementHeight &&
      windowScrollTop >= elementOffsetTop - windowHeight
    ) {
      // console.log("元素在可视区域出现");
      commentOpacity.value = 1
    } else {
      // console.log("元素咋可视区域消失");
      commentOpacity.value = 0
    }
  })
}

const userComment = ref("")

const communityStore = useCommunityStore()
const { randomArticles } = storeToRefs(communityStore)

const userStore = useUserStore()
const { isAttention, isSave, isSupport } = storeToRefs(userStore)

/* 获取是否已关注 */
function reqIsAttentionUser() {
  if (!userInfo) return
  userStore.isAttentionUser(articleInfo.value.user.id)
}

/* 获取是否已收藏，点赞文章 */
function reqIsOperateArticle(operateFun: "Save" | "Support") {
  if (!userInfo) return
  userStore.isOperateArticle(operateFun, articleInfo.value.id)
}

/* 获取随机文章 */
const reqGETRandomArticle = _.debounce(() => {
  communityStore.getRandomArticle(6)
}, 500)

/* 关注用户 */
function buttonConcerns(uid, is_following) {
  console.log(uid, is_following, userInfo)

  if (!userInfo) {
    noLoginInnerNotify()
  } else if (is_following) {
    /* 取关 */
    InnerConfirm("是否取消关注该用户？").then(() => {
      userStore
        .cancelAttentionUser(uid)
        .then(() => {
          // 手动将is_following改为1，修改btn样式
          reqIsAttentionUser()

          InnerNotify({
            message: "取消关注用户成功",
            type: "info",
            position: "top-right"
          })
        })
        .catch((error) => {
          messageReminder({
            message: `取消关注用户失败：${error}`,
            type: "warning"
          })
        })
    })
  } else {
    /* 关注 */
    userStore
      .attentionUser(uid)
      .then(() => {
        // 手动将is_following改为1，修改btn样式
        reqIsAttentionUser()
        InnerNotify({
          message: "关注用户成功",
          type: "success",
          position: "top-right"
        })
      })
      .catch((error) => {
        messageReminder({
          message: `关注用户失败：${error}`,
          type: "warning"
        })
      })
  }
}

/* 点赞，评论文章 */
function reqOperateArticle(operateFun: "Save" | "Support", article_id, article_uid) {
  // console.log(uid, is_following, userInfo)

  if (!userInfo) {
    noLoginInnerNotify()
  } else {
    if (operateFun == "Save") {
      communityStore
        .operateArticle({
          operateFun: operateFun,
          forward: isSave.value ? false : true,
          article_id,
          article_uid
        })
        .then(() => {
          isSave.value
            ? (articleInfo.value.save_counts = articleInfo.value.save_counts - 1)
            : (articleInfo.value.save_counts = articleInfo.value.save_counts + 1)
          reqIsOperateArticle("Save")
        })
        .catch((err) => {
          messageReminder({
            type: "error",
            message: `收藏失败:${err}`
          })
        })
    }
    if (operateFun == "Support") {
      communityStore
        .operateArticle({
          operateFun: operateFun,
          forward: isSupport.value ? false : true,
          article_id,
          article_uid
        })
        .then(() => {
          isSupport.value
            ? (articleInfo.value.support_counts = articleInfo.value.support_counts - 1)
            : (articleInfo.value.support_counts = articleInfo.value.support_counts + 1)
          reqIsOperateArticle("Support")
        })
        .catch((err) => {
          messageReminder({
            type: "error",
            message: `点赞失败:${err}`
          })
        })
    }
  }
}

/* 去文章信息页面 */
function goArticleInfoPage(item) {
  localCache.setCache("articleInfo", item)

  articleInfo.value = localCache.getCache("articleInfo")
}

onMounted(() => {
  window.addEventListener("scroll", handScroll)

  reqGETRandomArticle()
  reqIsAttentionUser()
  reqIsOperateArticle("Save")
  reqIsOperateArticle("Support")
})

onUnmounted(() => {
  window.removeEventListener("scroll", handScroll)
})
</script>

<style lang="less" scoped>
.articleInfoParticulars {
  // height: 100vh;
  background-color: #ecf5ff;
  padding: 20px 0;
  .page {
    .communityMain {
      background-color: #fff;
      border-radius: 10px;
      overflow: hidden;
      margin-bottom: 20px;

      .infoItem {
        // background-color: #999;
        padding: 40px 36px 0px;
        .top {
          // padding: 20px 24px 20px;
          // border-radius: 16px;
          // background: rgb(249, 249, 249);
          margin-bottom: 14px;
          cursor: pointer;
          display: flex;
          justify-content: space-between;
          /* 左边头像信息 */
          .portrait {
            display: flex;
            img {
              width: 55px;
              height: 49px;
              margin: auto 0;
              // 利用mask裁剪出图案
              // border-radius: 50%;
              mask-image: url("/images/interflow_icon/board-icon-mask.svg");
              -webkit-mask-image: url("/images/interflow_icon/board-icon-mask.svg");
              mask-repeat: round;
              -webkit-mask-repeat: round;
            }
            .describe {
              display: flex;
              flex-direction: column;
              // justify-content: space-around;
              margin-left: 10px;
              .name {
                margin-top: 8px;
                font-weight: 600;
                font-size: 17px;
              }
              .info {
                margin-top: 1px;
                font-size: 13px;
                color: rgb(147, 165, 189);
              }
            }
          }
          /* 右边关注按钮 */
          .concerns {
            margin: auto 0;
            width: 72px;
            height: 40px;
            border-radius: 20px;
            line-height: 40px;
            text-align: center;
            border: 0.5px solid #999;
          }
          .activeConcerns {
            border: 0;
            background-color: rgba(14, 21, 28, 0.05);
            color: #999;
          }
        }
        /* 摘要和封面 */
        .content {
          margin-bottom: 14px;
          .title {
            margin-bottom: 20px;
            font-size: 20px;
            letter-spacing: 0.5px;
          }
          .abstract {
            color: #0e151c;
            font-size: 16px;
            margin-bottom: 10px;
          }
          .cover {
            width: 100%;
            height: auto;
            .coverBox {
              border-radius: 6px;
              overflow: hidden;
              width: 60%;
              height: 60%;
              img {
                width: 100%;
                //object-fit  属性用于规定应如何调整 <img> 或 <video> 的大小来适应其容器。
                object-fit: cover;
              }
            }
          }
        }
        .bottom {
          position: relative;
          padding-bottom: 22px;
          border-bottom: 1px solid #eee;
          .bottomLeft {
            display: flex;
            .topic {
              cursor: pointer;
              display: flex;
              align-items: center;
              border: 1px solid rgba(14, 21, 28, 0.4);
              height: 28px;
              border-radius: 17px;
              padding: 0 10px 0 10px;
              overflow: hidden;
              margin-right: 12px;
              img {
                width: 16px;
                height: 16px;
                margin-right: 4px;
              }
              i {
                font-size: 13px;
              }
            }
          }
          .circle {
            width: 100%;
            display: flex;
            justify-content: space-between;
            background: #f7f8f9;
            padding: 16px;
            // 边框盒子模型
            box-sizing: border-box;
            margin-top: 26px;
            border-radius: 8px;
            .leftBox {
              margin-left: 10px;
              display: flex;
              img {
                width: 50px;
                height: 50px;
                mask-image: url("/public/images/interflow_icon/board-icon-mask.svg");
                -webkit-mask-image: url("/public/images/interflow_icon/board-icon-mask.svg");
                mask-repeat: round;
                -webkit-mask-repeat: round;
              }
              .describe {
                display: flex;
                flex-direction: column;
                justify-content: center;
                margin-left: 12px;
                h3 {
                  margin-bottom: 4px;
                }
                p {
                  font-size: 12px;
                  color: #999;
                }
              }
            }
            .rightBox {
              width: 50px;
              cursor: pointer;
              background-color: #0e151c;
              color: #fff;
              margin: auto 0;
              padding: 10px 14px;
              font-size: 12px;
              border-radius: 20px;
            }
          }

          .info {
            display: flex;
            justify-content: flex-end;
            margin-top: 20px;
            cursor: pointer;

            .comment,
            .view,
            .save,
            .like {
              color: rgba(14, 21, 28, 0.4);
              display: flex;
              align-items: center;
              margin-right: 6px;
              // `align-self` 控制子项自己在侧轴上的排列方式。
              // align-self: flex-end;
              // position: absolute;
              // top: 50%;
              // right: 84px;
              // transform: translateY(-50%);
              i {
                font-size: 24px;
                margin-right: 4px;
              }
            }
          }
          .timeAndType {
            color: rgba(14, 21, 28, 0.4);
            font-size: 12px;
            margin-top: 30px;
            display: flex;
            justify-content: space-between;
            align-content: center;
            i {
              &:nth-child(2) {
                font-size: 14px;
              }
            }
          }
        }
      }

      // 评论
      .comment {
        // height: 200px;
        background-color: #f9fafa;
        padding: 30px 40px 60px;
        overflow: hidden;
        h3 {
          font-size: 18px;
          font-weight: 500;
          color: #0e151c;
          margin-bottom: 20px;
          i {
            margin-left: 8px;
          }
        }

        // 发表评论
        .publishComment {
          // 开启图层
          will-change: transform;
          height: 70px;
          // background-color: #fff;
          margin-bottom: 40px;
          transition: all 0.5s;
          // 盒子阴影
          // box-shadow: 0 0.13636rem 0.81818rem rgba(0, 0, 0, 0.1);
          // position: fixed;
          // width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .portrait {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            overflow: hidden;
            img {
              width: 38px;
              height: 38px;
            }
          }
          // 修改input框的样式
          :deep(.el-input__wrapper) {
            border: 0;
            // width: 600px;
            border-radius: 20px;
          }
          .el-input {
            flex: 1;
            height: 38px;
            background-color: #f7f8f9;
            margin-left: 10px;
          }
          .info {
            height: 70px;
            width: 200px;
            display: flex;

            .icon {
              flex: 1;
              width: 20px;
              height: 70px;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;

              .count {
                font-size: 12px;
                color: #888;
              }
            }
          }
        }

        .commentBox {
          border-bottom: 1px solid #dbdbdb;
          padding-bottom: 30px;
        }
      }
    }
  }

  .rightBox {
    // position: -webkit-sticky;
    // position: sticky;
    // top: 20px;
    width: 340px;
    .information {
      padding: 20px 28px 20px;
      // height: 256px;
      border-radius: 14px;
      background: #fff;
      margin-bottom: 30px;
      h3 {
        font-size: 18px;
        font-weight: 500;
        letter-spacing: 1px;
        span {
          cursor: pointer;
          font-size: 14px;
          color: #999;
          line-height: 24px;
          float: right;
          i {
            font-size: 17px;
          }
        }
      }
      .informationInfo {
        cursor: pointer;
        margin-top: 20px;
        margin-left: 4px;
        .informationItem {
          display: flex;
          width: 100%;
          margin-bottom: 12px;
          .rankings {
            font-size: 16px;
            font-weight: 500;
          }
          a {
            color: inherit;
          }
          .text {
            margin-left: 12px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            letter-spacing: 0.5px;
            font-size: 16px;
          }
          &:nth-child(-n + 3) .rankings {
            color: red;
          }
        }
      }
    }

    .personInfo {
      padding: 20px 34px 12px;
      height: 240px;
      border-radius: 14px;
      background: rgb(249, 249, 249);
      margin-bottom: 30px;
      .top {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 20px;
        img {
          cursor: pointer;
          width: 80px;
          height: 80px;
          border-radius: 50%;
          // transition: all 0.5s;
          // &:hover {
          //   transform: scale(1.05);
          // }
        }
        h2 {
          margin-top: 10px;
          color: #0e151c;
        }
        h3 {
          color: rgba(14, 21, 28, 0.4);
        }
      }
      .bottom {
        display: flex;
        justify-content: space-between;
        padding: 0 8px;
        color: #0e151c;
        margin-top: 25px;
        .num {
          font-size: 22px;
          font-weight: 800;
        }
        .text {
          margin-left: 4px;
          color: rgba(14, 21, 28, 0.6);
        }
      }
    }

    .aboutUs {
      padding: 20px 24px 20px;
      border-radius: 16px;
      background: #fff;
      margin-bottom: 30px;
      cursor: pointer;
      display: flex;
      img {
        width: 55px;
        height: 55px;
        margin: auto 0;
        // 利用mask裁剪出图案
        // border-radius: 50%;
        mask-image: url("/images/interflow_icon/board-icon-mask.svg");
        -webkit-mask-image: url("/images/interflow_icon/board-icon-mask.svg");
        mask-repeat: round;
        -webkit-mask-repeat: round;
      }
      .describe {
        display: flex;
        flex-direction: column;
        // justify-content: space-around;
        margin-left: 10px;
        .name {
          margin-top: 8px;
          font-weight: 600;
          font-size: 17px;
        }
        .info {
          margin-top: 4px;
          font-size: 13px;
          color: rgb(147, 165, 189);
        }
      }
      i {
        cursor: pointer;
        line-height: 60px;
        font-weight: 600;
        font-size: 24px;
        margin-left: 24px;
        color: #777;
      }
    }
  }
}
</style>
